/* 页面容器 */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh; // 设置容器高度为视口高度
    background-color: #f5f5f5;

    /* 搜索栏样式 */
  .search-bar {
    padding: 15px;
    background-color: #fff;
    height: 60px;
    width: 100%;
  
    .search-input {
      background-color: #f2f2f2;
      border-radius: 20px;
      padding: 10px 15px;
      font-size: 14px;
    }
  
    .placeholder-style {
      color: #999;
    }
  }

    /* 内容区域 */
    .content-area {
        flex: 1; // 占据剩余空间
        display: flex;
        flex-wrap: wrap; // 允许换行
        justify-content: space-between; // 子元素之间留有间隔
        width: 80%;
        margin: 0 auto; // 居中对齐
        box-sizing: border-box;

        /* 目的地盒子 */
        .destination-box {
            width: calc(50.0% - 5px); // 减去间距，使得三个盒子一行
            margin-bottom: 10px; // 下边距用于分隔行
            height: 200px;
            background-color: #fbc2eb; // 示例背景颜色
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
    }
}